// Knowledgenotes视图组件
import React, { Component } from 'react'
import Footer from "@/components/Footer"
import styles from './index.less'
import { IKnowledgeList } from '@/util/knowledge'
import { observer } from 'mobx-react-lite'
import Articlecategory from '../../components/Articlecategory'
import Articletags from '../../components/Articletags'
interface Iprops {
    KnowledgeList: IKnowledgeList[][];
    goDetailPage: (item: IKnowledgeList) => void;
    timeAgo: (time: number) => string
}
let Index: React.FC<Iprops> = (props) => {
    return (<div className={styles.knowledgeHome}>
        <div className={styles.container}>
            <div className={styles.containerLeft}>
                {props.KnowledgeList[0] && props.KnowledgeList[0].map((item: IKnowledgeList) => {
                    return <div key={item.id} onClick={() => {
                        props.goDetailPage(item)
                    }}>
                        <div>
                            <img src={item.cover} alt="cover" />
                        </div>
                        <div>
                            <p>{item.title}</p>
                            <p>{item.summary}</p>
                            <div>{item.views}次阅读·大约{props.timeAgo(+new Date(item.createAt))}前</div>
                        </div>
                    </div>
                })
                }
            </div>
            <div className={styles.containerRighr}>
                <div className={styles.sticky}>
                    <Articlecategory />
                    <Articletags />
                </div>
            </div>
        </div>
    
    </div>

    );
}
export default observer(Index)